<template>
  <!--新增分类-->
  <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @cancel="handleCancel" cancelText="关闭" okText="确定">
    <!--表单-->
    <a-spin :spinning="confirmLoading">
      <j-form-container class="scroll-view" style="height: 400px">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24" v-if="levelType === 'oneType'">
              <a-form-model-item label="一级分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
                <a-input :disabled="disabled" v-model="model.address" placeholder="请输入一级分类名称" style="width: 100%;"></a-input>
              </a-form-model-item>
            </a-col>
            
            <a-col :span="24" v-if="levelType === 'twoType'">
              <a-form-model-item label="一级分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName">
                <a-select :disabled="disabled" placeholder="请选择一级分类" :value="model.projectName"
                  @change="handleChange('project',$event)">
                  <a-select-option v-for="(item,index) in levelOneOptions" :key="index" :value="item">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            
            <a-col :span="24" v-if="levelType === 'twoType'">
              <a-form-model-item label="二级分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
                <a-input :disabled="disabled" v-model="model.address" placeholder="请输入二级分类名称" style="width: 100%;"></a-input>
              </a-form-model-item>
            </a-col>
            
            <a-col :span="24" v-if="levelType === 'twoType'">
              <a-form-model-item label="加减类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modifiedType">
                <a-select :disabled="disabled" placeholder="请选择加减类型" :value="model.modifiedType"
                  @change="handleChange('modifiedType',$event)">
                  <a-select-option v-for="(item,index) in modifiedTypeList" :key="index" :value="item">
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
  import {httpAction,getAction,postAction} from '@/api/manage'
  export default {
    name: 'WtDevicetypeModal',
    components: {

    },
    data() {
      return {
        title: '',
        width: 800,
        visible: false,
        disableSubmit: false,
        //表单
        confirmLoading: false,
        labelCol: {xs: {span: 24},sm: {span: 5}},
        wrapperCol: {xs: {span: 24},sm: {span: 16}},
        labelCol2: {xs: {span: 24},sm: {span: 2}},
        wrapperCol2: {xs: {span: 24},sm: {span: 22}},
        validatorRules: {},
        model: {
          projectName: '',
          projectId: '',
          departName: '',
          departId: '',
          address:'',
          remark:'',
        },
        levelOneOptions:[],
        modifiedTypeList: [{
          label: '加分',
          value: '1'
        }, {
          label: '减分',
          value: '2'
        }],
        pageType:'',
        levelType:'',
        url: {
          add:'/equipment/wtEquipmentAddress/add',
          edit: '/equipment/wtEquipmentAddress/edit',
          list: '/equipment/wtEquipmentAddress/list',
          detail: '/equipment/wtEquipmentAddress//queryById',
          delete:'/equipment/wtEquipmentAddress/delete',
        },
      }
    },
    created() {
      this.Dictionary();
    },
    methods: {
      //下拉选择
      handleChange(type, item, index) {
        console.log(1, type, item, index);
        let _self = this;
        if (type === 'project') {
          this.model.projectName = item.label;
          this.model.projectId = item.value;
          //清空联动数据
          this.model.departName = '';
          this.model.departId = '';
          getAction(`/sys/sysDepart/getDepartListByParentId?parentId=${this.model.projectId}`)
            .then((res) => {
              if (res.success) {
                _self.departList = [];
                let treeList = res.result;
                _self.$nextTick(() => {
                  _self.departList = [...treeList].map((v) => {
                    return {
                      ...v,
                      value: v.id,
                      label: v.departName,
                    }
                  })
                  _self.$forceUpdate();
                })
              }
            })
        } else if (type === 'depart') {
          this.model.departName = item.label;
          this.model.departId = item.value;
        }
      },
      //获取数据字典列表
      Dictionary() {
        var _self = this;
        //项目列表
        getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
          if (res.success) {
            this.levelOneOptions = [];
            let treeList = res.result;
            this.levelOneOptions = [...treeList].map((v) => ({
              ...v,
              value: v.id,
              label: v.departName,
            }))
            if(this.pageType === 'edit'){
              let info = this.levelOneOptions.find((item)=>item.value == this.model.projectId);
              if(!!info){
                this.model.projectName = info.label;
              }
            }
          }
        })
      },
      add(type, record) {
        this.visible = true;
        this.pageType = type;
        this.levelType = record;
      },
      edit(record) {
        this.visible = true;
        this.model = record;
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const _self = this
        let params = {};
        let httpurl = ''
        if (_self.pageType === 'add') {
          httpurl = _self.url.add;
          params = _self.model;
        } else if (_self.pageType === 'edit') {
          httpurl = _self.url.edit;
          params = _self.model;
        }
        // 触发表单验证
        _self.confirmLoading = true;
        console.log('提交表单', params)
        // debugger
        httpAction(httpurl, params, 'POST')
          .then((res) => {
            if (res.success) {
              _self.$message.success(res.message);
              _self.close();
              _self.$emit('ok');
            } else {
              _self.$message.warning(res.message)
            }
          })
          .finally(() => {
            _self.confirmLoading = false
          })
      },
      submitCallback() {
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>
<style scoped>
  .scroll-view {
    overflow: auto;
    overflow-y: scroll;
  }
</style>